import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class TreePageWidget extends StatefulWidget {
  final String title;
  TreePageWidget({Key key, this.title}) : super(key: key);

  @override
  TreePageWidgetState createState() => TreePageWidgetState();
}

class TreePageWidgetState extends State<TreePageWidget> {
  int treeGrowthValue = 0;
  Timer _timer;
  bool isShowDrops;
  bool isShowPot;
  bool isShowFirst;
  bool isTouched;
  bool isShowFirstState;
  int treeNum1 = 0;
  int treeNum2 = 0;
  ValueNotifier state = new ValueNotifier(0);
  List<String> treeState = [
    "胚芽萌发",
    "嫩芽吐绿",
    "生机勃勃",
    "青青葱葱",
    "茁壮成长",
    "枝繁叶茂",
    "绿树成荫",
    "含苞待放",
    "开花朵朵"
  ];
  void _startTimer() {
    /*创建循环*/
    _timer = new Timer.periodic(new Duration(milliseconds: 300), (timer) {
      setState(() {
        isShowFirst = !isShowFirst;
      });
    });
  }

  void _cancelTimer() {
    _timer?.cancel();
  }

  int getTreeState(int treeGrowthValue) {
    int num = 2;
    for (int i = 0; i < 9; i++) {
      if (treeGrowthValue < num) return i;
      num = num * 2;
    }
    return 0;
  }

  @override
  void initState() {
    isTouched = false;
    isShowDrops = false;
    isShowFirst = false;
    isShowPot = false;
    treeGrowthValue = 0;
    state.value = getTreeState(treeGrowthValue);
    if(state.value%2 == 0){
      isShowFirstState = true;
      treeNum1 = state.value;
    }else{
      isShowFirstState = false;
      treeNum2 = state.value;
    }
    state.addListener(() {
      if(state.value%2 == 0){
        isShowFirstState = true;
        treeNum1 = state.value;
        print(treeNum1);
      }else{
        isShowFirstState = false;
        treeNum2 = state.value;
        print(treeNum2);
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Column(
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(colors: [
                  Color(0xFF4B9DF7),
                  Color(0xFFB0F7F3),
                  Color(0xffFAFAFA)
                ], begin: Alignment.topCenter, end: Alignment.bottomCenter)),
                child: Container(
                  height: 503,
                  margin: EdgeInsets.only(top: 50),
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: ExactAssetImage('assets/images/back.png'),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  decoration: BoxDecoration(
                      gradient: LinearGradient(
                          colors: [Color(0xFFA5C838), Color(0xFFFAFAFA)],
                          begin: Alignment.topCenter,
                          end: Alignment.bottomCenter)),
                ),
              )
            ],
          ),
          InkWell(
            onTap: () {
              if (isTouched) return;
              setState(() {
                isShowDrops = true;
                isShowPot = true;
                isShowFirst = true;
                isTouched = true;
              });
              _startTimer();
              Future.delayed(Duration(milliseconds: 1800), () {
                _cancelTimer();
                setState(() {
                  isTouched = false;
                  isShowPot = false;
                  isShowDrops = false;
                  isShowFirst = false;
                  treeGrowthValue += 10;
                  state.value = getTreeState(treeGrowthValue);
                });
              });
            },
            child: Container(
              height: 50,
              alignment: Alignment.centerRight,
              margin: EdgeInsets.only(top: 500),
              padding: EdgeInsets.only(right: 20),
              child: Container(
                child: Stack(
                  children: <Widget>[
                    Container(
                      height: 35,
                      width: 35,
                      padding: EdgeInsets.all(2),
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(40))),
                      child: Container(
                        decoration: BoxDecoration(
                            color: Color(0xFFA5C838),
                            borderRadius:
                                BorderRadius.all(Radius.circular(40))),
                        child: Image.asset('assets/images/waterPot.png'),
                      ),
                    ),
                    Container(
                      width: 40,
                      height: 20,
                      margin: EdgeInsets.only(top: 30),
                      alignment: Alignment.center,
                      decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(Radius.circular(10))),
                      child: Text(
                        '浇水',
                        style: TextStyle(
                            color: Colors.green,
                            fontWeight: FontWeight.bold,
                            fontSize: 12),
                      ),
                    )
                  ],
                ),
              ),
            ),
          ),
          Column(
            children: <Widget>[
              Container(
                alignment: Alignment.centerRight,
                margin: EdgeInsets.only(top: 100),
                child: Container(
                  height: 40,
                  width: 120,
                  decoration: BoxDecoration(
                      color: Color(0x89FFFFFF),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(30),
                          bottomLeft: Radius.circular(30))),
                  child: Row(
                    children: <Widget>[
                      Container(
                        padding: EdgeInsets.fromLTRB(2.5, 2.5, 2.5, 2.5),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                BorderRadius.all(Radius.circular(30))),
                        child: ClipOval(
                          child: Image.asset('assets/images/avatar.png'),
                        ),
                      ),
                      Spacer(),
                      Container(
                        child: Text(
                          '${treeState[getTreeState(treeGrowthValue)]}',
                          style: TextStyle(
                              color: Colors.green,
                              fontWeight: FontWeight.bold,
                              fontSize: 16),
                        ),
                      ),
                      Spacer(),
                    ],
                  ),
                ),
              ),
              Spacer(),
              Container(
                width: 230,
                height: 230,
                child: AnimatedCrossFade(
                    sizeCurve: ElasticOutCurve(),
                    firstCurve: Curves.ease,
                    secondCurve: Curves.ease,
                    duration: Duration(milliseconds: 600),
                    firstChild: Image.asset('assets/images/$treeNum1.png'),
                    secondChild: Image.asset('assets/images/$treeNum2.png'),
                    crossFadeState: isShowFirstState
                        ? CrossFadeState.showFirst
                        : CrossFadeState.showSecond),
              ),
              Container(
                margin: EdgeInsets.only(top: 15),
                child: Container(
                  height: 170,
                  margin: EdgeInsets.only(left: 10, right: 10),
                  decoration: BoxDecoration(
                      color: Color(0xFFFAFAFA),
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(10),
                          topRight: Radius.circular(10))),
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: 30,
                        width: 600,
                        padding: EdgeInsets.only(top: 5, left: 8),
                        decoration: BoxDecoration(
                            color: Color(0xFFEEEEEE),
                            borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(10),
                                topRight: Radius.circular(10))),
                        child: Text(
                          '点点滴滴，浇水记录',
                          style: TextStyle(
                              color: Color(0xFF333333),
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                      Divider(
                        height: 1,
                      ),
                      Expanded(
                        child: MediaQuery.removePadding(
                            removeTop: true,
                            context: context,
                            child: ListView.builder(
                              itemCount: 20,
                              itemBuilder: (context, index) {
                                return Container(
                                  margin: EdgeInsets.only(top: 10, left: 10),
                                  height: 20,
                                  child: Text(
                                      '第${index + 1}次浇水  2021年3月9日 20:25 '),
                                );
                              },
                            )),
                      )
                    ],
                  ),
                ),
              )
            ],
          ),
          isShowPot
              ? Container(
                  margin: EdgeInsets.only(top: 440, left: 220),
                  width: 60,
                  height: 60,
                  child: Image.asset('assets/images/waterPot.png'),
                )
              : SizedBox(),
          isShowDrops
              ? AnimatedCrossFade(
                  sizeCurve: ElasticOutCurve(),
                  firstCurve: Curves.ease,
                  secondCurve: Curves.ease,
                  duration: Duration(milliseconds: 300),
                  firstChild: Container(
                    margin: EdgeInsets.only(top: 460, left: 155),
                    width: 60,
                    height: 60,
                    child: Image.asset('assets/images/drops.png'),
                  ),
                  secondChild: SizedBox(
                    width: 60,
                    height: 60,
                  ),
                  crossFadeState: isShowFirst
                      ? CrossFadeState.showFirst
                      : CrossFadeState.showSecond)
              : SizedBox(),
        ],
      ),
    );
  }
}
